<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p><!--#-->
    <p class="p2">p2</p><!--.-->
</div>
<script>

    //对应css选择器
    var h1 = document.getElementsByTagName('h1');//标签选择器

    var self = document.getElementById('p1');//id选择器

    var p2 = document.getElementsByClassName('p2');//class选择器

    var father = document.getElementById('father');

    var children = father.children;//获取父节点下的所有子节点
    // father.firstChild
    // father.lastChild


</script>
</body>
</html>